<template>
  <BaseContainer :show-title="false">
    <div class="main flex justify-between">
      <a-descriptions size="small" :column="3" class="main__descriptions">
        <template #title>
          <span @click="handleBack" class="cursor-pointer">
            <arrow-left-outlined class="inline-block leading-0 ft-16 mr-2" />
            <span class="inline-block mb-0 font-bold ft-16">
              {{ `订单编号：${currentOrderData.orderNo}` }}
            </span>
          </span>
        </template>
        <a-descriptions-item label="平台">{{ currentOrderData.platformNames || '--' }}</a-descriptions-item>
        <a-descriptions-item label="词包ID">{{ currentOrderData.id }}</a-descriptions-item>
        <a-descriptions-item label="类型">{{ TypeKeyMap[currentOrderData.type] }}</a-descriptions-item>
        <a-descriptions-item label="套餐" v-if="currentOrderData.comboName">
          <a-tooltip placement="topLeft">
            <template #title>
              {{ currentOrderData.comboName }}
            </template>
            <span class="ell-1">{{ currentOrderData.comboName }}</span>
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item label="订单时长">{{ currentOrderData.comboPriceName }}</a-descriptions-item>
        <a-descriptions-item label="投放区域">
          <area-popover ellipsis :areas="currentOrderData.soldAreas" :product-id="currentOrderData.productId" />
        </a-descriptions-item>
        <a-descriptions-item label="客户ID">{{ currentOrderData.customerId }}</a-descriptions-item>
        <a-descriptions-item label="市场价">{{
          currentOrderData.marketPrice || currentOrderData.comboPrice
        }}</a-descriptions-item>
        <a-descriptions-item label="提单价" v-if="hasPermission([OPERATION, AGENT, AGENT_BOSS])">{{
          currentOrderData.orderPrice
        }}</a-descriptions-item>
        <template v-if="hasPermission([OPERATION, AGENT, AGENT_BOSS])">
          <a-descriptions-item label="付款类型">{{ PayTypeKeyMap[currentOrderData.payType] }}</a-descriptions-item>
          <a-descriptions-item label="付款余额">{{ currentOrderData.accountPaidAmount }}</a-descriptions-item>
          <a-descriptions-item label="付款币">{{ currentOrderData.bzCoinPaidAmount }}</a-descriptions-item>
        </template>
        <a-descriptions-item label="购买日期">{{ currentOrderData.createTime }}</a-descriptions-item>
        <a-descriptions-item label="时间段" v-if="BW || BWYXB">{{ currentOrderData.onLinePeriod }}</a-descriptions-item>
        <a-descriptions-item label="时间段" v-else>7*24小时</a-descriptions-item>
        <a-descriptions-item label="销售人员">{{ currentOrderData.sellerName }}</a-descriptions-item>
        <a-descriptions-item label="服务状态">{{
          ServiceStatusKeyMap[currentOrderData.serviceStatus]
        }}</a-descriptions-item>
        <a-descriptions-item label="版本" v-if="BW || BWYXB">{{
          BwVersionTypeKeyMap[currentOrderData.versionType]
        }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <!-- <div v-if="currentOrderData.productId === 7" style="display: flex; margin: 40px 0">
      <div class="dingdan">
        <div style="margin-top: 15px; font-weight: bold; font-size: 25px">加购移动端标王</div>

        <h1 v-if="jiaoyanshuj !== -1">
          限时特惠95折
          <span v-if="yiduduan" style="font-size: 20px; color: red; font-weight: bold"> ￥{{ yiduduan }} </span>
          <span v-else>
            <a-spin />
          </span>
        </h1>
        <div v-else>此类关键词不能做此产品</div>
        <p>
          <a-button :disabled="jiaoyanshuj === -1" style="margin-top: 10px" type="primary" @click="gomaiyido">
            立即购买
          </a-button>
          (只包含主词)
        </p>
      </div>
    </div> -->

    <a-modal v-model:visible="open" title="确认购买" @ok="handleOk"> </a-modal>
    <Divider />
    <table-toolbar title="已选关键词">
      <export-excel-group :col="columns" :data="orderKeyword" @on-export="handleExportExcel" />
    </table-toolbar>
    <a-table :pagination="false" row-key="frontKey" :columns="columns" :loading="loading" :data-source="orderKeyword" />
  </BaseContainer>
</template>

<script lang="ts" setup>
import { computed, onBeforeMount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '@/store/useOrderStore'
import getOrderKeyword, { type KeywordData } from '@/services/order/getOrderKeyword'
import type { TableProps } from 'ant-design-vue'
import TableToolbar from '@/components/table-toolbar/index.vue'
import BaseContainer from '@/components/base-container/index.vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import Divider from '@/components/divider/index.vue'
import AreaPopover from '@/components/area-popover/index.vue'
import { compact } from 'lodash-es'
import { useCategory } from '@/hooks/useCategotry'
import { WordTypeEnum } from '@/core/enums/type'
import { PlatformKeyMap } from '@/core/mapper/platform'
import { PlatformEnum } from '@/core/enums/platform'
import { PayTypeKeyMap, TypeKeyMap } from '@/core/mapper/type'
import { ServiceStatusKeyMap } from '@/core/mapper/status'
import { storeToRefs } from 'pinia'
import ExportExcelGroup from '@/components/export-excel-group/index.vue'
import { BwVersionTypeKeyMap } from '../price-sheet/interface'
import { hasPermission } from '@/utils/permission'
import { AuthEnum } from '@/core/enums/auth'
import { message } from 'ant-design-vue'
// import residueNumberdeFnis from '@/services/account-management/residueNumberiteus'
import getJiagouPirceiusFnis from '@/services/account-management/getJiagouPirceius'
import addJiaGouPriceAskFnis from '@/services/account-management/addJiaGouPriceAsk'
import addImgOrderdis from '@/services/account-management/addImgOrderd'
const router = useRouter()
const orderStore = useOrderStore()
const { currentOrderData } = storeToRefs(orderStore)
const [orderKeyword, fetchOrderKeyword, loading] = getOrderKeyword()
const { BW, BWYXB } = useCategory(currentOrderData.value.productId)
// ，
const open = ref(false)
const yiduduan = ref('')
const [, getJiagouPirceiusFn] = getJiagouPirceiusFnis()
const [, addJiaGouPriceAskFn] = addJiaGouPriceAskFnis()
const [, addImgOrderdFn] = addImgOrderdis()
const { OPERATION, AGENT, AGENT_BOSS } = AuthEnum
const columns = computed<TableProps['columns']>(() => {
  return compact([
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '平台',
      dataIndex: 'platformName',
      key: 'platformName',
      customRender: ({ text }: { text: string }) => {
        return text || '--'
      }
    },
    {
      title: '关键词',
      dataIndex: 'name',
      key: 'name',
      customRender: ({ record, text }: { record: KeywordData; text: string }) => {
        return record.type === WordTypeEnum.Zhzc
          ? `${text}（组）`
          : record.type === WordTypeEnum.Zxzc
            ? `${text}（赠）`
            : text
      }
    }
  ])
})
function handleExportExcel(exportExcel: Function) {
  exportExcel(`订单关键词${Date.now()}`)
}

const tupatehusi = async () => {
  open.value = true
}

const zonitem = ref({})
const jiaoyanshuj = ref('')
async function getJiagouPirceiusooius() {
  let [, res] = await getJiagouPirceiusFn({
    orderId: currentOrderData.value.id
  })
  if (res.data.code === 0) {
    yiduduan.value = res.data.data.marketPrice

    zonitem.value = res.data.data

    jiaoyanshuj.value = res.data.data.errorCode
  }
}
//  点击获取移动端加购
const gomaiyido = async () => {
  let [, res] = await addJiaGouPriceAskFn(zonitem.value)
  if (res.data.code === 0) {
    message.success('加购成功')
    router.push('/price-manager')
  } else {
    message.error(res.data.msg)
  }
}
const handleOk = async (e) => {
  let [, res] = await addImgOrderdFn({
    orderId: currentOrderData.value.id
  })
  open.value = false
}
function handleBack() {
  router.go(-1)
}

function loadOrderKeyword() {
  fetchOrderKeyword({
    orderId: currentOrderData.value.id!
  })
}

onBeforeMount(() => {
  if (!currentOrderData.value.id) {
    router.replace('/order-manager')
  }
})

onMounted(() => {
  loadOrderKeyword()
  if (currentOrderData.value.id === undefined || currentOrderData.value.productId !== 7) {
    return
  } else {
    // getJiagouPirceiusooius()
  }
})
</script>

<style lang="scss" scoped>
.main {
  &__extra {
    min-width: 242px;
    margin-left: 88px;
  }

  .statistic {
    width: 220px;
    text-align: right;
  }

  &__descriptions {
    margin-bottom: -8px;

    ::v-deep(.ant-descriptions-item-content) {
      overflow: hidden;
      flex-grow: 1;
    }
  }
}

.seacher {
  width: 250px;
}

.dingdan {
  width: 250px;
  text-align: center;
  height: 150px;
  border-radius: 15px;
  border: 1px solid red;
  background-color: white;
}

.danding {
  width: 250px;
  height: 150px;
  background-color: #fff2cc;
  margin-left: 30px;
  border-radius: 15px;
  text-align: center;
}

.ggwentesadhasd {
  text-decoration: line-through;
}
</style>
